<!--阈值预警-->
<template>
  <normal-layout page-index="3-1">
    <div class="bodyDiv">
      <div class="left">
        <el-card  style="margin: 10px">
          <h3 slot="header">检索车辆</h3>
          <div style="white-space: nowrap; display: flex">
            <el-select placeholder="车种" style="margin: 5px"></el-select>
            <el-select placeholder="车型" style="margin: 5px"></el-select>
          </div>
          <div style="white-space: nowrap;display: flex">
            <el-select placeholder="车号" style="margin: 5px"></el-select>
            <el-select placeholder="所属系统" style="margin: 5px"></el-select>
          </div>
          <div style="white-space: nowrap; display: flex">
            <el-select placeholder="监测点位" style="margin: 5px"></el-select>
            <el-select placeholder="预警项目" style="margin: 5px"></el-select>
          </div>
          <div style="white-space: nowrap;display: flex">
            <el-select placeholder="预警级别" style="margin: 5px"></el-select>
            <el-select placeholder="预警状态" style="margin: 5px"></el-select>
          </div>
          <div style="white-space: nowrap; display: flex">
            <el-select placeholder="预警类型" style="margin: 5px"></el-select>
            <el-select placeholder="故障时间" style="margin: 5px"></el-select>
          </div>
          <div style="white-space: nowrap;display: flex">
            <el-button style="border-radius: 20px; border-color: #ace0f9; width: 200px;margin-left: calc(50% - 100px); margin-top: 10px" >检索车辆</el-button>
          </div>
        </el-card>
        <el-card  style="margin: 10px; margin-bottom: 65px">
          <h4 style="margin-left: 50px">最高温度</h4>
          <dashboard style="width: 100%;height: 280px;margin-bottom: -60px; margin-top: -40px"></dashboard>
          <el-divider></el-divider>
          <h4 style="margin-left: 50px">预警数量</h4>
          <annual-pie style="height: 280px;height: 250px;margin-bottom: -30px; margin-top: -30px" :test-data="pieData"></annual-pie>
        </el-card>
      </div>
      <div class="right">
        <el-card style="margin-top: 10px; width: 100%">
          <h3 slot="header">车辆状态波动</h3>
          <LineHistogram style="width: 100%;height: 410px; margin-bottom: -40px;margin-top: -10px"></LineHistogram>
        </el-card>
        <div>
          <el-card style="margin-top: 10px;margin-bottom: 10px">
            <h3 slot="header">阈值预警信息</h3>
            <el-table :data="tableData1" stripe style="margin-top: 10px;height: 280px;overflow-y: auto">
              <el-table-column label="序号" prop="no"></el-table-column>
              <el-table-column label="车种" prop="class"></el-table-column>
              <el-table-column label="车型" prop="type"></el-table-column>
              <el-table-column label="车号" prop="id"></el-table-column>
              <el-table-column label="所属系统" prop="belong"></el-table-column>
              <el-table-column label="监测点位" prop="monitor"></el-table-column>
              <el-table-column label="预警项目" prop="warningItem"></el-table-column>
              <el-table-column label="预警提示" prop="warningNotice"></el-table-column>
              <el-table-column label="级别" prop="level"></el-table-column>
              <el-table-column label="采集参数" prop="parameter"></el-table-column>
              <el-table-column label="状态" prop="status"></el-table-column>
              <el-table-column label="预警类型" prop="warningtype"></el-table-column>
            </el-table>
            <el-pagination></el-pagination>
          </el-card>
        </div>
      </div>
    </div>
  </normal-layout>
</template>

<script>
  import NormalLayout from "../../components/NormalLayout";
  import Dashboard from "../../components/Charts/Dashboard";
  import AnnualPie from "../../components/Charts/AnnualPie";
  import LineHistogram from "../../components/Charts/LineHistogram";
    export default {
        name: "ThresholdWarning",
      components:{LineHistogram, AnnualPie, Dashboard, NormalLayout},
      data(){
          return{
            pieData:[
              {value: 1048, name: '级别一'},
              {value: 735, name: '级别二'},
              {value: 94, name: '正常'},
            ],
            tableData1:[
              {
                no:'01',
                class:'货车',
                type:'BD-35',
                id:'112568',
                belong:'结构件',
                monitor:'桨叶',
                warningItem:'温度预警',
                warningNotice:'82>80(OC)',
                level:'1级',
                parameter:'63',
                status:'发生',
                warningtype:'超温'
              },{
                no:'02',
                class:'货车',
                type:'HC-11',
                id:'145623',
                belong:'风力机',
                monitor:'桨叶',
                warningItem:'温度预警',
                warningNotice:'82>80(OC)',
                level:'2级',
                parameter:'82',
                status:'发生',
                warningtype:'超温'
              },{
                no:'03',
                class:'货车',
                type:'VS-23',
                id:'113565',
                belong:'传动结构',
                monitor:'桨叶',
                warningItem:'温度预警',
                warningNotice:'82>80(OC)',
                level:'1级',
                parameter:'66',
                status:'发生',
                warningtype:'超温'
              },{
                no:'04',
                class:'货车',
                type:'BT-19',
                id:'156652',
                belong:'发电机',
                monitor:'桨叶',
                warningItem:'温度预警',
                warningNotice:'82>80(OC)',
                level:'3级',
                parameter:'95',
                status:'发生',
                warningtype:'超温'
              },
            ]
          }
      }
    }
</script>

<style scoped>
  .bodyDiv{
    display: flex;
  }
  .left{
    width: 30%;
  }
  .right{
    width: 69%;
  }
</style>
